<template>
  <div class="shop-coupon">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>商铺优惠券页面</el-menu-item>
      </el-menu>
    </div>

    <el-container>
      <!-- 内容 -->
      <el-main>
        <el-card class="box-card" shadow="never">
          <!-- 查询框 -->
          <el-form :inline="true" class="demo-form-inline" ref="shopFrom" :model="shopFrom">
            <el-form-item prop="idName" label="店铺ID/名称：" style="margin-right: 100px">
              <el-input placeholder="搜索店铺ID/名称" v-model="shopFrom.idName"></el-input>
            </el-form-item>
            <el-form-item label="优惠券：" prop="name">
              <el-input placeholder="优惠券名称" v-model="shopFrom.name"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button class="query" @click="onSubmit()">查询</el-button>
              <el-button class="reset" @click="resetForm('shopFrom')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 数据统计 -->
        <div class="statistics">
          <p>领取总金额:{{ getMoney }}元</p>
          <p>发放总数量:{{ issued }}张</p>
        </div>
        <!-- 优惠券列表 -->
        <el-table style="width: 100%" :data="couponList">
          <el-table-column prop="shop_id" label="店铺ID" width="180"> </el-table-column>
          <el-table-column prop="shop_name" label="店铺名称" width="180"> </el-table-column>
          <el-table-column prop="coupon_name" label="优惠券名称"> </el-table-column>
          <el-table-column prop="coupon_money" label="优惠券金额/元"> </el-table-column>
          <el-table-column prop="restrict" label="使用金额限制"> </el-table-column>
          <el-table-column prop="day" label="使用时限/天"> </el-table-column>
          <el-table-column prop="total_issued" label="发放总数量/张"> </el-table-column>
          <el-table-column prop="getMoney" label="领取金额/元"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 页码 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ShopCoupon',
  props: [''],
  data () {
    return {
      couponList: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 总数据条数
      total: 0,
      shopFrom: {
        idName: '',
        name: ''
      }
    }
  },

  components: {},

  computed: {
    issued () {
      let issued = 0
      this.couponList.map((couponList) => {
        if (typeof (couponList.total_issued) === 'number') {
          issued += couponList.total_issued
        }
      })
      return issued
    },
    getMoney () {
      let getMoney = 0
      this.couponList.map((couponList) => {
        if (typeof (couponList.getMoney) === 'number') {
          getMoney += couponList.getMoney
        }
      })
      return getMoney
    }
  },

  beforeMount () { },

  mounted () { },

  created () {
    this.getCouponList()
  },

  methods: {
    // 获取数据列表
    async getCouponList () {
      const { data } = await this.$http.get(`/shop_coupon? _page=${this.queryInfo.pagenum}&_limit=${this.queryInfo.pagesize}`)
      // console.log(data)
      this.couponList = data
      // console.log(this.couponList)
      this.total = data.length
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getCouponList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getCouponList()
    },
    // 点击重置按钮表单重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getCouponList()
    },
    async onSubmit () {
      // 如果没有选择或者输入任何条件, 查询所有数据
      if (this.shopFrom.idName + this.shopFrom.name === '') {
        return this.getCouponList()
      }
      // 先将数据清空
      this.couponList = []
      if (this.shopFrom.idName !== '') {
        // console.log(this.shopFrom.idName)
        // 按照店铺id发送请求进行模糊查询
        const { data } = await this.$http.get(`/shop_coupon?shop_id_like=${this.shopFrom.idName}`)
        this.couponList = data
        // console.log(data)

        // 按照名称发送请求进行模糊查询
        const { data: res1 } = await this.$http.get(`/shop_coupon?shop_name_like=${this.shopFrom.idName}`)
        // console.log(res1)
        res1.forEach((item) => {
          if (!this.couponList.find((subitem) => subitem.shop_id === item.shop_id)) {
            this.couponList.push(item)
          }
        })
      }
      if (this.shopFrom.name !== '') {
        // 按照优惠券名称发送请求进行模糊查询
        const { data: res2 } = await this.$http.get(`/shop_coupon?coupon_name_like=${this.shopFrom.name}`)
        // console.log(res2)
        res2.forEach((item) => {
          if (!this.couponList.find((subitem) => subitem.name === item.name)) {
            this.couponList.push(item)
          }
        })
      }
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.shop-coupon {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
    width: 100%;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .el-main {
    padding-left: 40px;
    color: #333;
    text-align: center;
  }
}
.query {
  margin-left: 160px;
}
.reset {
  margin-left: 50px !important;
}
.box-card {
  display: flex;
  justify-content: space-between;
  padding-left: 80px;
  border: 1px solid #000;
  border-radius: 6px;
}
.statistics {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
  p {
    margin-right: 50px;
  }
}
.block {
  margin-left: 40px;
}
.el-table {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 10px;
}
</style>
